<template>
    <div class="descriptionIndex">
        <el-dialog
                title="商品描述"
                :visible.sync="isShowDialog"
                 width="900px"
                :close-on-click-modal="isModelClose"
                :style="dialogStyle"
                :before-close="close">
            <div style="display: flex;justify-content: center;flex-direction: column" v-html="params.description"></div>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirm()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Vue,Prop} from 'vue-property-decorator';
    import $ from "jquery";
    import SpuBasicInfo from "@/components/product-manager/dialog/spu-basic-info.vue";
    import SkuInfo from "@/components/product-manager/dialog/sku-info.vue";
    import ParamsInfo from "@/components/product-manager/dialog/params-info.vue";
    import {namespace} from "vuex-class";
    import AdminApiActions from "@/components/api/admin-api-actions";
    const goodStore=namespace("goods");
    @Component({
        components:{
            SpuBasicInfo,
            SkuInfo,
            ParamsInfo
        }
    })
    export default class Index extends Vue {
        @Prop() params;
        public isModelClose:boolean=false;
        public dialogStyle:any={};
        public isShowDialog:any=true;
        public active=1;
        public centerDialog(){
            this.$nextTick(()=>{
                let dialogHeight=$(".descriptionIndex .el-dialog").height();
                let windowHeight=$(window).height();
                let dh=windowHeight/2-dialogHeight/2+20;
                this.dialogStyle={
                    top:0+"px"
                };
            });
        }
        @Emit("close")
        public close(){
            this.isShowDialog=false;
        }
        async created() {
            this.centerDialog();
        }
        public async confirm(){
            this.close();
        }

    }
</script>
<style lang="less">
    .descriptionIndex{
        img{
            width: 100%!important;
        }
        background-color: white;
        .el-dialog{
            margin-top: 0px!important;
            margin-bottom: 0px!important;
        }
        .el-dialog__wrapper{
            position: absolute;
        }
        .dialog-footer{
            display: flex;
            justify-content: center;
        }
        .el-dialog__body{
            padding: 0px 20px;
        }
    }
</style>